<template>
  <div>
    <el-drawer
      custom-class="base-drawer"
      :model-value="drawerObj.drawer"
      :title="drawerObj.title"
      :size="drawerConfig.size"
      :direction="drawerObj.direction"
      :modal="drawerObj.modal"
      :show-close="drawerObj.showClose"
      :with-header="drawerObj.withHeader"
      :destroy-on-close="drawerObj.destroyOnClose"
      :close-on-press-escape="drawerObj.closeOnPressEscape"
      :close-on-click-modal="drawerObj.closeOnClickModal"
      :lock-scroll="drawerObj.lockScroll"
      :append-to-body="drawerObj.appendToBody"
      :before-close="handleClose"
    >
      <template #header>
        <template v-if="drawerObj.drawerType === 1">
          <div class="header-box">
            <h4>{{ drawerObj.title }}</h4>
          </div>
        </template>
        <template v-if="drawerObj.drawerType === 2">
          <div class="header-box">
            <h4>{{ drawerObj.title }}</h4>
            <div class="btn">
              <slot name="headerBtn"></slot>
            </div>
          </div>
        </template>
        <template v-if="drawerObj.drawerType === 3">
          <div class="header-box">
            <h4>{{ drawerObj.title }}</h4>
            <div class="btn">
              <div class="layout-icon">
                <span :class="drawerConfig.layoutType === 2 ? 'active' : ''" @click="checkLayoutType(2)">
                  <i></i>
                  <i></i>
                </span>
                <span :class="drawerConfig.layoutType === 3 ? 'active' : ''" @click="checkLayoutType(3)">
                  <i></i>
                  <i></i>
                  <i></i>
                </span>
              </div>
              <el-icon size="20px" @click="onFullScreen">
                <FullScreen v-if="drawerConfig.size !== '100%'" />
                <Minus v-if="drawerConfig.size === '100%'" />
              </el-icon>
              <slot name="headerBtn"></slot>
            </div>
          </div>
        </template>
      </template>
      <template #default>
        <slot name="content"></slot>
      </template>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 中英文
const emit = defineEmits(['sonCloseDrawer'])
const drawerObj = defineProps({
  drawer: {
    type: Boolean,
    default: false
  }, // 是否显示 Drawer
  size: {
    type: String,
    default: '20%'
  }, // Drawer 窗体的大小
  title: {
    type: String,
    default: '抽屉公共组件'
  }, // Drawer 的标题
  direction: {
    type: String,
    default: 'rtl'
  }, // Drawer 打开的方向
  modal: {
    type: Boolean,
    default: true
  }, // 是否需要遮罩层
  showClose: {
    type: Boolean,
    default: true
  }, // 是否显示关闭按钮
  withHeader: {
    type: Boolean,
    default: true
  }, // 控制是否显示 header 栏
  zIndex: {
    type: Number,
    default: 99
  }, // 设置 z-index
  destroyOnClose: {
    type: Boolean,
    default: false
  }, // 控制是否在关闭 Drawer 之后将子元素全部销毁
  closeOnPressEscape: {
    type: Boolean,
    default: true
  }, // 是否可以通过按下 ESC 关闭 Drawer
  closeOnClickModal: {
    type: Boolean,
    default: true
  }, // 是否可以通过点击 modal 关闭 Drawer
  lockScroll: {
    type: Boolean,
    default: true
  }, // 是否在 Drawer 出现时将 body 滚动锁定
  appendToBody: {
    type: Boolean,
    default: false
  }, // Drawer 自身是否插入至 body 元素上。
  isCloseDrawer: {
    type: Boolean,
    default: false
  }, // 关闭抽屉 是否提醒
  drawerType: {
    type: Number,
    default: 1 // 1 = 是否显示标题，显示关闭按钮 2 = 是否显示标题，显示保存编辑取消 3 = 是否显示标题，显示全屏，切换选择布局，保存编辑取消
  }
})
// 关闭抽屉
const handleClose = () => {
  if (drawerObj.isCloseDrawer) {
    ElMessageBox.confirm(`${t('keys.isempty_the_content')}？`, 'Confirm', {
      distinguishCancelAndClose: true,
      confirmButtonText: t('keys.confirm'),
      cancelButtonText: t('keys.cancel'),
    })
      .then(() => {
        emit('sonCloseDrawer', { drawer: false })
        done()
        // 动画关闭需要一定的时间
      })
      .catch(() => {
        // catch error
      })
  } else {
    emit('sonCloseDrawer', { drawer: false })
  }
}
// 抽屉默认配置
const drawerConfig = reactive({
  size: drawerObj.size,
  layoutType: 2 // 2 = 两列，3 = 三列
})
// 设置全屏
const onFullScreen = () => {
  drawerConfig.size = drawerConfig.size === '100%' ? drawerObj.size : '100%'
}
const checkLayoutType = (e) => {
  drawerConfig.layoutType = e
}
</script>

<style lang="scss" scoped>
.base-drawer {
  .header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    h4 {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
      color: #333333;
      line-height: 28px;
    }
    .btn {
      display: flex;
      align-items: center;
      :deep(.el-icon) {
        margin-right: 12px;
        cursor: pointer;
      }
      .layout-icon {
        display: flex;
        span {
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;
          border: 1px solid #ffffff;
          transition: 0.3s all;
          cursor: pointer;
          i {
            background: var(--el-color-info);
            transition: 0.3s all;
          }
          &:nth-child(1) {
            i {
              width: calc(20px / 2 - 4px);
              height: 16px;
              &:nth-child(1) {
                margin-right: 2px;
              }
            }
          }
          &:nth-child(2) {
            i {
              width: calc(20px / 3 - 3.5px);
              height: 16px;
              margin-right: 2px;
              &:nth-child(3) {
                margin-right: 0;
              }
            }
          }
          &.active {
            border: 1px solid var(--el-color-primary);
            border-radius: 1px;
            i {
              background: var(--el-color-primary);
            }
          }
        }
      }
    }
    // &::after {
    //   content: '';
    //   position: absolute;
    //   top: 60px;
    //   left: 0;
    //   right: 0;
    //   width: 100%;
    //   height: 1px;
    //   background: #ebebeb;
    // }
  }
}
</style>
